<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">课程表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <!-- <div class="order_title">
                    课程表列表
                </div> -->
                <el-divider></el-divider>
                <full-calendar ref="calendar"
                               class="calendar_box"
                               :config="fullCalendarConfig"
                               :events="testFUn"></full-calendar>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css"

export default {
    name: 'basetable',
    components: {
        FullCalendar
    },
    data() {
        return {
            pageTotal: 0,
            loading: false,
            tableData: [
            ],
            queryData: {
                pageNum: 1,
                pageSize: 10,
            },
            showEdit: false,
            currentEditUser: {},

            fullCalendarConfig: {
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek,agendaDay,list',
                },
                buttonText: {
                    today: '今天',
                    week: '周',
                    day: '日',
                    list: '日程',
                },
                locale: 'zh-cn',
                slotDuration: '00:15:00', // 时间间隙
                minTime: '15:30:00', // startTime
                maxTime: '18:30:00', // endTime
                defaultView: 'agendaWeek', //显示默认视图
                weekMode: 'liquid',
                // weekNumbers: true,
                weekends: false,
                height: 'auto',
                // timeFormat: 'HH:mm',
                slotLabelFormat: '(HH:mm)', // 左侧时间格式
                nowIndicator: true,
                navLinks: true, // can click day/week names to navigate views
                // eventLimit: 3, // 限制一天中显示的事件数，默认false
                allDaySlot: false, // 隐藏全天
                // allDayText: '全天', // 日历上显示全天的文本
                editable: false, // 禁止编辑
                // selectable: true, // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
                selectHelper: false, // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
                unselectAuto: true, // 当点击页面日历以外的位置时，自动取消当前的选中状态。
                eventBackgroundColor: '#3a87ad', // 设置日程事件的背景色
                select: this.selectHandler,
                eventClick: this.eventClick,
            },
            fullCalendarEvents: [],
        };
    },
    watch: {

    },
    filters: {

    },
    created() {
        this.getTableData();
    },
    mounted() {
        let testArr = [
            {
                title: '篮球(教学楼302)\n\n王老师\n\n17875625116', // 事件内容
                start: '2021-11-01 16:00:00', // 事件开始时间
                end: '2021-11-01 18:00:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1001,
            },
            {
                title: `跆拳道`, // 事件内容
                start: '2021-11-01 16:00:00', // 事件开始时间
                end: '2021-11-01 16:45:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1002,
            },
            {
                title: '书法', // 事件内容
                start: '2021-11-01 17:00:00', // 事件开始时间
                end: '2021-11-01 17:45:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1002,
            },
            {
                title: '课程3', // 事件内容
                start: '2021-11-04 16:00:00', // 事件开始时间
                end: '2021-11-04 18:00:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1003,
            },
        ]
        this.fullCalendarEvents = testArr
    },
    methods: {
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/user/listUser",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    // _this.tableData = res.result.list;
                    // _this.pageTotal = res.result.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        testFUn(start, end, timezone, callback) {
            console.log('>>>>>>>>>>>>>>>>>>11111', start.unix(), end.unix(), timezone)
            let events = [{
                title: '篮球(教学楼302)\n\n王老师\n\n17875625116', // 事件内容
                start: '2021-11-01 16:00:00', // 事件开始时间
                end: '2021-11-01 18:00:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1001,
            },
            {
                title: `跆拳道`, // 事件内容
                start: '2021-11-01 16:00:00', // 事件开始时间
                end: '2021-11-01 16:45:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1002,
            },
            {
                title: '书法', // 事件内容
                start: '2021-11-01 17:00:00', // 事件开始时间
                end: '2021-11-01 17:45:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1002,
            },
            {
                title: '课程3', // 事件内容
                start: '2021-11-04 16:00:00', // 事件开始时间
                end: '2021-11-04 18:00:00', // 事件结束时间
                color: 'rgba(9, 9, 9, 0.2)', // 事件的显示颜色
                backgroundColor: '#3a87ad',
                id: 1003,
            },]
            callback(events);
        },
        // 培训详情begin
        selectHandler(start, end, allDay) {
            let startFormat = this.$moment(start).format('YYYY-MM-DD')
            let endFormat = this.$moment(end).format('YYYY-MM-DD')
            console.log(
                'from === ' +
                startFormat +
                '====to === ' +
                endFormat +
                '====allDay====' +
                allDay
            )
            // // 添加日历
            // var json = {
            //   title: '张三' + ' - ' + '夜班',
            //   text: '张三',
            //   allDay: false,
            //   backgroundColor: '#3a87ad',
            //   start: start.format('YYYY-MM-DD'),
            //   end: end.format('YYYY-MM-DD'),
            // }
            // this.events.push('renderEvent', json, true)
        },
        // 更新排班
        eventClick(calEvent, jsEvent, view) {
            console.log(calEvent, jsEvent, view)
        },
    },
};
</script>

<style lang="scss" scoped >
</style>
<style lang="scss">
</style>
